<template>
<div id="DetailedInformation">
  <TopA></TopA>
  <el-row class="re-header">
    <el-col :span="24">
      <el-page-header @back="goBack" content="商品详情" class="header-adjustment">
      </el-page-header>
    </el-col>
  </el-row>
  <el-row>
    <el-col :span="14">
      <el-row type="flex" justify="center" align="middle" class="adjustment">
        <el-col :span="11">
          <video-player
            v-if="isShow"
            class="video-player vjs-custom-skin"
            ref="VideoPlayer"
            :playsinline="true"
            :options="playerOptions"
          >
          </video-player>
          <div v-if="!isShow" class="img-box-size" v-on:click="change(true, null)">
            <img :src="showImg" class="img-box-size">
            <div class="show-img-font">
              点击切换至视频
            </div>
          </div>
          <el-row style="font-size: 0">
            <div :class="{'img-box': true, 'select': isSelect === index}" v-for="(item, index) in data.pictures" :key="index" v-on:click="change(false, item, index)"><img :src="item" class="di-img-small"></div>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="10" :pull="3">
      <el-row class="adjustment">
        <el-col :span="24">
          <el-row>
            <div class="title">{{data.goodName}}</div>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="di-tags">价格</div>
            </el-col>
            <el-col :span="20">
              <div class="di-price">￥{{data.price}}</div>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="4">
              <div class="di-tags">库存</div>
            </el-col>
            <el-col :span="20">
              <div class="di-tags">{{data.stock}}</div>
            </el-col>
          </el-row>
          <el-row type="flex" align="middle">
            <el-col :span="4">
              <div class="di-tags">数量</div>
            </el-col>
            <el-col>
              <div class="di-kucun-adjustment"><el-button v-on:click="reduce" :disabled="form.count === 1"><img src="static/302减.png" class="button-img"></el-button></div>
              <div class="di-kucun-adjustment"><input v-on:blur="panDuan" v-on:keydown.enter="panDuan" v-model="form.count" class="kucun-input"></input></div>
              <div class="di-kucun-adjustment"><el-button v-on:click="add" :disabled="this.form.count >= this.data.stock"><img src="static/301加.png" class="button-img"></el-button></div>
            </el-col>
          </el-row>
          <el-row>
            <div class="submit-button">
              <el-button class="buy-button-freeze" v-if="data.freeze" disabled>当前商品已冻结</el-button>
              <el-button class="buy-button-freeze" v-else-if="data.stock === 0" disabled>售罄</el-button>
              <el-button class="buy-button" v-on:click="open" v-else>立即购买</el-button>
            </div>
          </el-row>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <el-row type="flex" justify="center" class="adjustment-tab">
    <el-col :span="17">
      <el-tabs type="border-card">
        <el-tab-pane label="商品详情">
          <p v-html="data.description"></p>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</div>
</template>

<script>
import TopA from "../components/TopA";
export default {
  name: "DetailedInformation",
  props: {

  },
  components: {TopA},
  data() {
    return {
      msg:"",
      data: null, //存储数据
      activeName: null, //显示的标签
      isShow: true, //控制显示的图片
      showImg: null, //大图展示
      isSelect: null, //小图选中
      form:{
        count: 1 //购买数量
      },
      playerOptions: {
        playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 导致视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: "video/mp4",// 这里的种类支持很多种：基本视频格式、直播、流媒体等，具体可以参看git网址项目
          src: "static/测试.mp4" // url地址
        }],
        poster: "static/ds.png", // 你的封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          fullscreenToggle: true  // 全屏按钮
        }
      }
    }
  },
  methods:{
    open(){
      const h = this.$createElement;
      this.$msgbox({
        center: true,
        customClass: "message2",
        message: h('div', null, [
          h('div', {
            class: "alter-status"
          }, "确定购买？"),
        ]),
        showCancelButton: true,
        confirmButtonText: '确定',
        confirmButtonClass: "message-button",
        cancelButtonText:　'取消',
        cancelButtonClass: "message-button2",
      }).then(action=>{
        this.buy()
      })
    },
    dataInit: function () {
      this.data = this.$route.query.data;
      if (this.data != null) {
        this.playerOptions.sources[0].src = this.data.videos[0];
        this.playerOptions.poster = this.data.pictures[0];
      }
      // alert(JSON.stringify(this.data))
    },
    //减购买数量
    reduce: function () {
      if (this.form.count > 1) {
        this.form.count --;
      } else {
        this.form.count = 1;
      }
    },
    //增加购买数量
    add: function () {
      if (this.form.count < this.data.stock) {
        this.form.count ++;
      } else {
        this.form.count = this.data.stock;
      }
    },
    panDuan:function () {
      if (this.form.count > this.data.stock) {
        this.form.count = this.data.stock;
      } else {
        if (this.form.count < 1) {
          this.form.count = 1;
        }
      }
    },
    goBack: function () {
      this.$router.push({
        path: '/home_A'
      })
    },
    change: function (value, src, index) {
      this.isSelect = index;
      this.isShow = value;
      this.showImg = src;
    },
    buy: function () {
      if (sessionStorage.getItem("userId")) {
        this.$api.seller.goodsSold({
          goodId: this.data.goodId,
          userId: sessionStorage.getItem("userId"),
          amount: this.form.count,
          transactionAddress: sessionStorage.getItem("transactionAddress"),
          phone: sessionStorage.getItem("phone")
        }).then(res => {
          if (res.data.code === 200) {
            this.$message({
              message: "购买成功",
              type: "success"
            });
            this.data.stock = this.data.stock - this.form.count;
            this.$router.push({
              path: "/Result",
              query: {
                path: this.$route.path,
                data: this.data
              }
            })
          }
        })
      } else {
        this.$message({
          message: "请先登录",
          type: "warning"
        });
        this.$router.push({
          path: "/loginA",
        })
      }
    }
  },
  created() {
    this.dataInit();
  }
}
</script>

<style lang="scss" scoped>
#DetailedInformation {

}
.di-img-small {
  width: 100px;
  height: 100px;
}
.box {
  border: 2px solid rgba(176, 224, 230, 1);
}
.di-img {
  width: 516px;
  height: 516px;
}
.di-img-small {
  width: 100px;
  height: 100px;
}
.adjustment {
  padding-top: 200px;
}
.img-box {
  display: inline-block;
  border: 2px solid #7D7D7D;
  border-radius: 5px;
}
.select {
  border: 2px solid #9B1A1A;
  /*box-shadow: ;*/
}
.img-box-adjustment {
  margin-left: -20px;
}
.title {
  font-size: 48px;
  font-weight: bold;
  color: #363636;
  line-height: 42px;
  letter-spacing: 1px;
}
.di-tags {
  font-size: 36px;
  color: #7D7D7D;
  font-weight: 500;
  padding-top: 30px;
}
.di-tags-adjustment {
  min-height: 100px;
}
.di-price {
  font-size: 36px;
  color: rgba(255, 130, 71, 1);
  padding-top: 30px;
  font-weight: 500;
}
.button-img {
  width: 20px;
  height: 20px;
  display: inline-block;
}
.di-kucun-adjustment {
  padding-top: 30px;
  display: inline-block;
}
.buy-button {
  margin-right: 0;
  overflow: hidden;
  position: relative;
  width: 178px;
  outline: none;
  border-radius: 20px;
  padding: 20px 0;
  background-color: rgba(176, 224, 230, 1);
  color: white;
  border: none;
  font-size: 36px;
  font-weight: 500;
  cursor: pointer;
}
.buy-button-unOnline {
  background: rgba(176, 224, 230, 0.6);
  margin-right: 0;
  overflow: hidden;
  position: relative;
  width: 150px;
  outline: none;
  border-radius: 20px;
  padding: 20px 0;
  color: rgba(28, 28, 28, 0.6);
  border: none;
  font-size: 36px;
  font-weight: 500;
  cursor: pointer;
}
.buy-button-freeze {
  background: rgba(176, 224, 230, 0.6);
  margin-right: 0;
  overflow: hidden;
  position: relative;
  width: 350px;
  outline: none;
  border-radius: 20px;
  padding: 20px 0;
  color: rgba(28, 28, 28, 0.6);
  border: none;
  font-size: 36px;
  font-weight: 500;
  cursor: pointer;
}
.kucun-input {
  height: 60px;
  width: 80px;
  border: 1px solid #DCDFE6;
  outline: none;
  line-height: 1;
  font-size: 30px;
  text-align: center;
}
.input-adjustment {
  margin-top: 2px;
}
.di-description {
  font-size: 28px;
  color: #7D7D7D;
  font-weight: 500;
  padding-top: 30px;
}
.text-hidden {
  word-break: break-all;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.re-header {
  position: fixed;
  z-index: 2000;
}
.submit-button {
  padding-top: 170px;
  >>> .el-button {
    margin: 0;
    padding: 0;
  }
}
.header-adjustment {
  padding-top: 100px;
}
.adjusement-bbbbbbb {
  padding-top: 30px;
}
.img-box-size {
  width: 516px;
  height: 516px;
  position: relative;
}
.show-img-font {
  font-size: 24px;
  color: white;
  position: absolute;
  bottom: 0;
  right: 0;
  background: rgba(176, 224, 230, 0.8);
  border-radius: 20px 0 0 0;
  padding: 3px;
}
.adjustment-tab {
  padding-top: 50px;
}
/*/deep/ .el-input__inner {*/
/*  display: inline-block;*/
/*  text-align: center;*/
/*  height: 60px;*/
/*  width: 80px;*/
/*  padding: 0;*/
/*}*/
>>> .el-button {
  height: 60px;
}
>>> .vjs-custom-skin > .video-js {
  width: 516px;
  height: 516px;
}
>>> .el-page-header {
  font-size: 24px;
}
>>> .el-page-header__title {
  font-size: 28px;
  color: #7D7D7D;
}
>>> .el-page-header__content {
  font-size: 28px;
  color: #7D7D7D;
}
>>> .el-page-header__left::after {
  height: 40px;
  width: 5px;
  color: #B0E0E6;
}
>>> .el-icon-back:before {
  font-size: 30px;
}

>>> .el-button:hover {
  background: rgba(176, 224, 230, 0.6);
  color: rgba(28, 28, 28, 0.6);
}
>>> .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
  color: rgba(176, 224, 230, 1);
}
>>> .el-page-header__left .el-icon-back {
  color: #7D7D7D;
}
</style>
